<template>
	<view>
		<!-- 自适应顶部刘海平 -->
		<!-- <view class="nav" :style="{height:statusBarHeight + 'px' }"></view> -->
		<!-- 城市	 -->
		<view class="swiperTop" >
			<view class="cityTop" :style="{marginTop: statusBarHeight + 'px'}" @tap="vity">
				{{city || '贵阳市'}}
				<u-icon name="arrow-down" style="margin-left: 10rpx;"></u-icon>
			</view>
			<map style="width: 100%;height: 800rpx;" :latitude="latitude"  :longitude="longitude" :markers="marker" :scale="scale"  :polyline="polyline"></map>
			<!-- <u-swiper border-radius="0" interval="2000" height="520" indicator-pos="bottomRight"  :list="list"></u-swiper> -->
		</view>
		<!-- end -->
		<view class="mattes wrap">
			<view>
				<u-tabs-swiper ref="uTabs"
					:current="current" 
					:list="tabList"
					 @change="tabsChange" 
					 :bar-style="barStyle"
					 active-color="#333333"
					:is-scroll="true"></u-tabs-swiper>
			</view>
			<!-- 滑块 -->
		    <swiper class="swiper-box"  :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 帮我送 -->
				<swiper-item class="swiper-item" >
					<view >
						<view class="mattes_box">
							<view class="mattes_box_fa">
								<view class="flew atlin">
									<image class="mattes_box_tui" src="/static/qita/tui.png"></image>
									<view style="width: 72%;" v-if="uFrom.title != undefined">
										<view class="color66">{{uFrom.title}}</view>
										<view class="color99 marTop10 size26rpx" >{{uFrom.address}}</view>
										<view class="marTop10">{{uFrom.name}}<text class="color66" style="margin-left: 15rpx;">{{uFrom.mobile}}</text></view>
									</view>
									<u-input v-else @change="click" disabled class="mattes_box_fa_input" placeholder="请填写发货信息"  ></u-input>
									<view class="mattes_box_fa_left"><span style="color: #0091FF;">常用</span></view>
								</view>
							</view>
						</view>
						<view class="mattes_box">
							<view class="mattes_box_fa">
								<view class="flew atlin" >
									<image class="mattes_box_tui" src="/static/qita/tui1.png"></image>
									<view style="width: 72%;" v-if="uFrom1.title != undefined">
										<view class="color66">{{uFrom1.title}}</view>
										<view class="color99 marTop10 size26rpx" >{{uFrom1.address}}</view>
										<view class="marTop10">{{uFrom1.name}}<text class="color66" style="margin-left: 15rpx;">{{uFrom1.mobile}}</text></view>
									</view>
									<view 
										style="width: 70%;"
										v-else 
										class="color99"
										@tap="show = true"
									>请填写收货信息</view>
									<view class="mattes_box_fa_left" ><span style="color: #FF6600;">常用</span></view>
								</view>
							</view>
						</view>
						
						<!-- end -->
						<!-- 更多活动 -->
						<view class="mattes_action">
							<u-section :show-line="false" :right="false" title="更多活动" sub-title="查看更多"></u-section>
						</view>
						<view class="center ">
							<image  class="marTop30 banner" src="https://pic2.zhimg.com/v2-1ff5916c03819f0c38002b26ddbfa309_b.jpg"></image>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" >
					<scroll-view scroll-y class="scroll" @scrolltolower="onreachBottom">
						2
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" >
					<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
						3
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" >
					<scroll-view scroll-y class="scroll" @scrolltolower="onreachBottom">
						4
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" >
					<scroll-view scroll-y class="scroll" @scrolltolower="onreachBottom">
						5
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 收货弹窗 -->
		<u-popup mode="bottom" closeable="true" border-radius="25" height="75%" v-model="show">
			<view class="center padding35rpx size35rpx">收货信息</view>
			<u-line border-style="solid" color="#E4E4E4"></u-line>
			<view class="padding25rpx color66 dis li atlin">
				<view style="width: 20%;" class="dis">
					<label>姓</label><label>名</label>
				</view>
				<view style="width: 70%;">
					<u-input v-model="perFrom.name" placeholder="请填写姓名"></u-input>
				</view>
			</view>
			<view class="padding25rpx color66 dis li atlin">
				<view style="width: 20%;" class="dis">
					<label>电</label><label>话</label>
				</view>
				<view style="width: 70%;">
					<u-input v-model="perFrom.mobile" placeholder="请输入电话号码"></u-input>
				</view>
			</view>
			<view class="padding25rpx color66 dis li atlin">
				<view style="width: 20%;" class="dis">
					<label>地</label><label>址</label>
				</view>
				<view style="width: 70%;line-height: 70rpx;" class="atlin" @click="balltn">
					<view style="color: #c0c4cc; " v-if="index == ''">请选择地址</view>
					<view class="color33 line1" v-else>{{selector[index]}}</view>
					<u-icon class="arrow-right" name="arrow-right" color="#666666"></u-icon>
				</view>
			</view>
			<!-- 选择收货地址 -->
		<!-- 	<u-picker 
				v-model="ball" 
				mode="selector" 
				range-key="cateName"
				confirm-color="#ff6600"
				 @confirm="confirm"
				:range="selector"></u-picker> -->
			<!-- end -->
			<view class="padding25rpx color66  dis li atlin">
				<view style="width: 20%;" class="dis">
					<label>楼层门牌</label>
				</view>
				<view style="width: 70%;">
					<u-input v-model="perFrom.mobile" placeholder="请输入楼层门牌号"></u-input>
				</view>
			</view>
			<!-- end -->
			<view class="padding25rpx">
				<view class="index_tian  padding35rpx">
					<view class="size32rpx" style="font-weight: bold;">智能填写</view>
					<u-input 
						type="textarea"
						 class="marTop20"
						v-model="perFrom.act"
						style="font-size: 28rpx;color: #999999;"
						placeholder="粘贴地址信息，自动拆分姓名、电话和地址"
					></u-input>
					<view class="dis">
						<view class="flew atlin" @tap="paste">
							<image style="width: 32rpx; height: 32rpx;" src="../../static/images/icon-fuzhi@2x.png"></image>
							<label class="color99">粘贴</label>
						</view>
						<view class="index_tian-btn" @tap="intelligent">智能识别</view>
					</view>
				</view>
			</view>
			<!-- end -->
			<view class="padding25rpx">
				<button style="background: #FF6600;color: #FFFFFF;" @tap="affirm">确认</button>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	let App = getApp()
	export default {
		components:{},
		data() {
			return {
			   latitude:26.56822,
		   　　 longitude: 106.7141,//经度
			   scale:13,//缩放级别
			   compass:true,
			   // show-compass:true,
			   // enable-3D:false,
				polyline:[
					{//指定一系列坐标点，从数组第一项连线至最后一项
					　　　　points:[
						   　　{latitude: 34.79977,longitude: 113.66072},
						  　　 {latitude: 34.795541,longitude: 113.681646},
					　　　　],
					　　　　color:"#ff6600",//线的颜色
					　　　　width:1,//线的宽度
					// 　　　　dottedLine:true,//是否虚线
					　　　　arrowLine:true,    //带箭头的线 开发者工具暂不支持该属性
					　　}
				],
			　　marker: [
	 
			   {
				  　　id:0,
				  　　latitude: 34.79977,//纬度
				  　　longitude: 113.66072,//经度
				  　　iconPath: '',    //显示的图标        
				  　　rotate:0,   // 旋转度数
				  　　width:10,   //宽
				  　　height:20,   //高
				 　　 title:'我在这里',//标注点名
				 　　 alpha:0.5,   //透明度
				 　　 label:{//为标记点旁边增加标签   //因背景颜色H5不支持
				 　　 content:'Hello,I am here',//文本
			   　　　　color:'red',//文本颜色
				  },
				  callout:{//自定义标记点上方的气泡窗口 点击有效  
				  　　content:'贵阳市花果园店',//文本
				  　　color:'#ffffff',//文字颜色
				  　　fontSize:14,//文本大小
				  　　borderRadius:2,//边框圆角
				 　　 bgColor:'#00c16f',//背景颜色
				  　　display:'ALWAYS',//常显
				  },
				 	   
				  },
				  {
					 　　id:1,
					 　　latitude: 34.79970,//纬度
					 　　longitude: 113.64000,//经度
					 　　iconPath: '',    //显示的图标        
					 　　rotate:0,   // 旋转度数
					 　　width:10,   //宽
					 　　height:20,   //高
					　　 title:'我在这里',//标注点名
					　　 alpha:0.5,   //透明度
					　　 label:{//为标记点旁边增加标签   //因背景颜色H5不支持
					// 　　 content:'Hello,I am here',//文本
				  　　　　color:'red',//文本颜色
						 // 　　fontSize:24,//文字大小
						 //    x:5,//label的坐标，原点是 marker 对应的经纬度
						 //    y:1,//label的坐标，原点是 marker 对应的经纬度 
						 //    borderWidth:12,//边框宽度
						 //    borderColor:'pink',//边框颜色    
						 // 　　borderRadius:20,//边框圆角                        
						 // 　　bgColor:'black',//背景色
						 // 　　padding:5,//文本边缘留白
						 //    textAlign:'right'//文本对齐方式。
					 },
					 callout:{//自定义标记点上方的气泡窗口 点击有效  
					 　　content:'兰花广场旁边',//文本
					 　　color:'#ffffff',//文字颜色
					 　　fontSize:14,//文本大小
					 　　borderRadius:2,//边框圆角
					　　 bgColor:'#00c16f',//背景颜色
					 　　display:'ALWAYS',//常显
					 },
					 // anchor:{//经纬度在标注图标的锚点，默认底边中点
					 //     x:0,    原点为给出的经纬度
					 //     y:0,
					 // }
								  
					 }
			   ],
				city:'',
				statusBarHeight: 0,
				//轮播图
				list:[
					'https://pic3.zhimg.com/80/v2-f24cb76e134c959eef6033dc7f62cfd0_720w.jpg',
					'https://pic3.zhimg.com/80/v2-5ca1ba235370fa9395cc631c5570e625_720w.jpg',
					'https://pica.zhimg.com/80/v2-e34f3c973c20dd368518a7e3f4937cca_720w.jpg'
				],
				//按钮
				tabList:[
					{name:'帮我送'},
					{name:'帮我取'},
					{name:'帮我买'},
					{name:'帮我办'},
					{name:'帮排队'}
				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
			    swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				//tab滑块背景色
				barStyle:{backgroundColor :'#FF6600'},
				show:false,
				//收货信息填写
				perFrom:{
					name:'',
					mobile:'',
					address:'',
					men:'',
					act:''
				},
				ball:false,//选择收货地址
				selector: ['花果园购物中心213','花果园T1区1栋1单元2106最帅的男人', '贵州最帅的男人','选择其他地址'],
				index:'',
				//发货地址
				uFrom:{
					mobile:'15684767864',
					name:'张天柱',
					address:'贵州省贵阳市花果园财富广场2号楼',
					title:'国色天香'
				},
				//收货地址
				uFrom1:{
					// mobile:'15684767864',
					// name:'张天柱',
					// address:'贵州省贵阳市花果园财富广场2号楼',
					// title:'国色天香'
				},
			}
		},
		computed: {
			//获取用户信息
			userInfo() {
				return this.$store.getters['userinfo']
			}
		},
		onLoad() {
			// this.$mHelper.to('',true)//
			// this.$mHelper.toast('gfhdjghdfjkg','success')
			// this.getList();
			var statusBarHeight =  getApp().globalData.statusBatHeight //高度
			this.statusBarHeight = statusBarHeight + 5 ;
			
		},
		methods: {
			//填写收货地址弹窗确认
			affirm(){
				console.log('填写收货地址弹窗确认')
			},
			//粘贴
			paste(){
				console.log('粘贴')
			},
			//智能识别
			intelligent(){
				console.log('智能识别')
			},
			//确定选择地址
			confirm(e){
				console.log('打印地址',e[0])
				console.log(this.ball)
				this.index = e[0]
			},
			//选择地址弹窗事件
			balltn(){
				this.$mHelper.to('pages/index/address/address',true)
				console.log('5132')
			},
			//打开弹窗
			fn(){
				this.show = true
				console.log('520')
			},
			//打开发货地址弹窗
			click(){
				
			},
			//打开城市选择
			vity(){
				this.$mHelper.to('pages/index/vity/vity',true)
			},
			tabsChange(index){
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
		    animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log('触发底部')
			}
		} 
	}
</script>

<style lang="scss">
	@import '@/static/css/index.scss';
/deep/.u-input__textarea.data-v-460c1d26 {
    width: auto;
    font-size: 28rpx;
    color: #8BC34A;
    padding: 10rpx 0;
    line-height: normal;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
</style>
